<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      align-center
      :show-close="false"
      destroy-on-close
      @close="handleClose"
      draggable
    >
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>人员查看</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close"
            ><CircleCloseFilled color="#fff"
          /></el-icon>
        </div>
      </template>
      <el-tabs v-model="activeTabName">
        <el-tab-pane label="基本信息" name="0">
          <div class="bg-white mt-[10px] p-[10px]">
            <BaseTable>
              <tr>
                <td class="td-name">姓名</td>
                <td>{{ detailData.name }}</td>
                <td class="td-name">英文名</td>
                <td>{{ detailData.nameEn }}</td>
              </tr>
              <tr>
                <td class="td-name">电子邮件</td>
                <td>{{ detailData.email }}</td>
                <td class="td-name">办公电话</td>
                <td>{{ detailData.telOffice }}</td>
              </tr>
              <tr>
                <td class="td-name">人事单位</td>
                <td>{{ detailData.hrUnitName }}</td>
                <td class="td-name">在职情况</td>
                <td>{{ detailData.personState == 1 ? "是" : "否" }}</td>
              </tr>
              <tr>
                <td class="td-name">职工号</td>
                <td>{{ detailData.account }}</td>
                <td class="td-name">性别</td>
                <td>
                  <CommonLabel
                    isFetch
                    paramsName="人员-性别(男女)"
                    labelKey="name"
                    :value="detailData.sexId"
                  />
                </td>
              </tr>
              <tr>
                <td class="td-name">手机号</td>
                <td>{{ detailData.mobile }}</td>
                <td class="td-name">出生日期</td>
                <td>{{ detailData.birthday }}</td>
              </tr>
              <tr>
                <td class="td-name">政治面貌</td>
                <td>
                  <CommonTreeLabel
                    isFetch
                    paramsName="政治面貌"
                    labelKey="name"
                    :value="detailData.polityId"
                  />
                </td>
                <td class="td-name">职称</td>
                <td>{{ detailData.titleName }}</td>
              </tr>
              <tr>
                <td class="td-name">身份证号/护照号</td>
                <td>{{ detailData.idCard }}</td>
                <td class="td-name">所属单位</td>
                <td>{{ detailData.unitName }}</td>
              </tr>
              <tr>
                <td class="td-name">研究方向</td>
                <td>{{ detailData.researchField }}</td>
                <td class="td-name">科学研究领域</td>
                <td>{{ detailData.searchName }}</td>
              </tr>
              <tr>
                <td class="td-name">一级学科</td>
                <td>{{ detailData.firstLevel }}</td>
                <td class="td-name">杰出人才</td>
                <td>
                  <CommonLabel isFetch paramsName="荣誉称号" :value="detailData.honorTitleId" />
                </td>
              </tr>
              <tr>
                <td class="td-name">硕导/博导</td>
                <td>
                  <CommonLabel isFetch paramsName="导师类型" :value="detailData.tutorTypeId" />
                </td>
                <td class="td-name">最后学历</td>
                <td>
                  <CommonLabel isFetch paramsName="学历" :value="detailData.eduLevelId" />
                </td>
              </tr>
              <tr>
                <td class="td-name">最后学位</td>
                <td>
                  <CommonLabel
                    isFetch
                    paramsName="学位"
                    labelKey="name"
                    :value="detailData.eduDegreeId"
                  />
                </td>
                <td class="td-name">毕业院校</td>
                <td>{{ detailData.graduateSchool }}</td>
              </tr>
            </BaseTable>
          </div>
        </el-tab-pane>
        <el-tab-pane label="详细信息" name="1">
          <div class="bg-white mt-[10px] p-[10px]">
            <BaseTable>
              <tr>
                <td class="td-name">教育经历</td>
                <td style="width: 87.5%">{{ detailData.learnSpecialty }}</td>
              </tr>
              <tr>
                <td class="td-name">出国经历</td>
                <td>{{ detailData.experienceAbroad }}</td>
              </tr>
              <tr>
                <td class="td-name">进修培训情况</td>
                <td>{{ detailData.learning }}</td>
              </tr>
              <tr>
                <td class="td-name">学术及社会兼职</td>
                <td>{{ detailData.parttime }}</td>
              </tr>
            </BaseTable>
          </div>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <div class="dialog-footer">
          <div class="operate-btns">
            <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import BaseTable from "@/views/project/components/BaseTable.vue";
import CommonLabel from "@/views/project/components/CommonLabel.vue";
import CommonTreeLabel from "@/views/project/components/CommonTreeLabel.vue";
import { getPersonDetail } from "@/api/project/common";
const dialogVisible = ref(false);
const activeTabName = ref("0");
const detailData = ref({});
const operateId = ref(null);
//查看
const view = (id) => {
  dialogVisible.value = true;
  operateId.value = id;
  getDetail();
};
const getDetail = async () => {
  const params = {
    id: operateId.value,
  };
  const res = await getPersonDetail(params);
  detailData.value = res.data[0];
};
defineExpose({ view });
const handleClose = () => {
  activeTabName.value = "0";
};
</script>

<style scoped lang="scss">
@import url("@/views/project/index.scss");
:deep(.el-tabs__header) {
  padding: 0 10px;
  margin-bottom: 0;
  background: #fff;
}
</style>
